<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="https://img02.hua.com/slider/20_graduation_m.jpg" alt="">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://img02.hua.com/slider/21_birthday_banner_m.jpg" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 导航 -->
    <div class="nav">
     <van-grid
      column-num="5"
     >
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_flowers.png" text="鲜花" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_forever.png" text="永生花" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_cakes.png" text="蛋糕" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_gifts.png" text="礼品" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_chocolate.png" text="巧克力" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_birthday_1224.png" text="生日祝福" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_express_1224.png" text="表白求婚" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_business_1224.png" text="商务开业" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_anniversary_1224.png" text="周年纪念" />
       <van-grid-item icon="https://img02.hua.com/wx_imgs/home_group_1224.png" text="企业团购" />
     </van-grid>
    </div>
    <!-- 加载商品 -->
    <div>
      <h3>送恋人 / 爱情鲜花</h3>
      <van-card
        num="2"
        :desc="product.Instro"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        v-for="product in products"
        :key="product.id"
      >
      <template #title>
        <div class="title">
          {{product.Cpmc}}
        </div>
      </template>
      <template #price>
        <div class="title">
          ￥{{product.Price}}
        </div>
      </template>
      <template #tags>
        <div class="sales">
          已销售{{product.Sales}}件
        </div>
      </template>
      <template #num>
        <div class="cart">
          <van-tag
           round type="warning"
           size="large"
          >
            <van-icon name="shopping-cart-o" />
          </van-tag>
        </div>
      </template>
      </van-card>
    </div>
    <div>
      <h3>送长辈鲜花</h3>
      <van-card
        num="2"
        :desc="list.Instro"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        v-for="list in lists"
        :key="list.id"
      >
      <template #title>
        <div class="title">
          {{list.Cpmc}}
        </div>
      </template>
      <template #price>
        <div class="title">
          ￥{{list.Price}}
        </div>
      </template>
      <template #tags>
        <div class="sales">
          已销售{{list.Sales}}件
        </div>
      </template>
      <template #num>
        <div class="cart">
          <van-tag
           round type="warning"
           size="large"
          >
            <van-icon name="shopping-cart-o" />
          </van-tag>
        </div>
      </template>
      </van-card>
    </div> -->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      products: [],
      lists: [],
    }
  },
  created () {
    axios({
      url: 'https://m.hua.com/home/GetProductListPrice',
      method: 'POST',
      params: {
      },
      data: 'ItemCodes=9010966,9012471,9012455,9012177,9012467,9012493,9012451,9012506',
    })
      .then(res => {
        // console.log('数据', res)
        this.products = res.data.Datas.ProductPrices
        // console.log(this.products)
      })
      .catch(err => console.log('异常', err))
    // 第二部分
    axios({
      url: 'https://m.hua.com/home/GetProductListPrice',
      method: 'POST',
      params: {
      },
      data: 'ItemCodes=9012452,9010842,9012503,9012521,9010741,9012332',
    })
      .then(res => {
        console.log('数据', res)
        this.lists = res.data.Datas.ProductPrices
        console.log(this.lists)
      })
      .catch(err => console.log('异常', err))
  },
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 170px;
  .my-swipe {
    width: 90%;
    height: 170px;
    margin: 0 auto;
    border-radius: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
h3{
  text-align: center;
}
.nav{
  width: 90%;
  height: 170px;
  margin: 0 auto;
  }
.title{
  font-weight: bold;
  font-size: 14px;
}
.sales{
  font-size: 12px;
  color: #ccc;
}

</style>
